<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康服务 - 用户认证</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .container {
            background: white;
            border-radius: 10px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            width: 400px;
            max-width: 90%;
        }
        
        .tab-container {
            display: flex;
            background: #f8f9fa;
        }
        
        .tab {
            flex: 1;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            border: none;
            background: none;
            font-size: 16px;
            transition: all 0.3s;
        }
        
        .tab.active {
            background: white;
            color: #667eea;
            font-weight: bold;
        }
        
        .form-container {
            padding: 30px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            color: #333;
            font-weight: 500;
        }
        
        input {
            width: 100%;
            padding: 12px;
            border: 2px solid #e1e5e9;
            border-radius: 5px;
            font-size: 14px;
            transition: border-color 0.3s;
        }
        
        input:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .btn {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .btn:hover {
            transform: translateY(-2px);
        }
        
        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        .message {
            margin-top: 15px;
            padding: 10px;
            border-radius: 5px;
            text-align: center;
        }
        
        .success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .user-info {
            background: #e3f2fd;
            padding: 20px;
            border-radius: 5px;
            margin-top: 20px;
        }
        
        .user-info h3 {
            color: #1976d2;
            margin-bottom: 10px;
        }
        
        .user-info p {
            margin: 5px 0;
            color: #333;
        }
        
        .logout-btn {
            background: #dc3545;
            margin-top: 15px;
        }
        
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="tab-container">
            <button class="tab active" onclick="showTab('login')">登录</button>
            <button class="tab" onclick="showTab('register')">注册</button>
        </div>
        
        <div class="form-container">
            <!-- 登录表单 -->
            <div id="loginForm">
                <h2 style="text-align: center; margin-bottom: 20px; color: #333;">用户登录</h2>
                <div class="form-group">
                    <label for="loginUsername">用户名</label>
                    <input type="text" id="loginUsername" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="loginPassword">密码</label>
                    <input type="password" id="loginPassword" placeholder="请输入密码">
                </div>
                <button class="btn" onclick="login()">登录</button>
                <div id="loginMessage"></div>
            </div>
            
            <!-- 注册表单 -->
            <div id="registerForm" class="hidden">
                <h2 style="text-align: center; margin-bottom: 20px; color: #333;">用户注册</h2>
                <div class="form-group">
                    <label for="registerUsername">用户名</label>
                    <input type="text" id="registerUsername" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="registerEmail">邮箱</label>
                    <input type="email" id="registerEmail" placeholder="请输入邮箱">
                </div>
                <div class="form-group">
                    <label for="registerPassword">密码</label>
                    <input type="password" id="registerPassword" placeholder="请输入密码">
                </div>
                <button class="btn" onclick="register()">注册</button>
                <div id="registerMessage"></div>
            </div>
            
            <!-- 用户信息 -->
            <div id="userInfo" class="hidden">
                <h2 style="text-align: center; margin-bottom: 20px; color: #333;">用户信息</h2>
                <div id="userDetails"></div>
                <button class="btn logout-btn" onclick="logout()">退出登录</button>
            </div>
        </div>
    </div>
    
    <script>
        const API_BASE = 'http://localhost:8080/oauth';
        let currentToken = localStorage.getItem('token');
        
        // 页面加载时检查登录状态
        window.onload = function() {
            if (currentToken) {
                getUserProfile();
            }
        };
        
        function showTab(tab) {
            // 隐藏所有表单
            document.getElementById('loginForm').classList.add('hidden');
            document.getElementById('registerForm').classList.add('hidden');
            document.getElementById('userInfo').classList.add('hidden');
            
            // 移除所有tab的active类
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            
            // 显示对应表单和激活tab
            if (tab === 'login') {
                document.getElementById('loginForm').classList.remove('hidden');
                document.querySelectorAll('.tab')[0].classList.add('active');
            } else if (tab === 'register') {
                document.getElementById('registerForm').classList.remove('hidden');
                document.querySelectorAll('.tab')[1].classList.add('active');
            }
        }
        
        function showMessage(elementId, message, isError = false) {
            const element = document.getElementById(elementId);
            element.innerHTML = `<div class="message ${isError ? 'error' : 'success'}">${message}</div>`;
            setTimeout(() => {
                element.innerHTML = '';
            }, 5000);
        }
        
        async function register() {
            const username = document.getElementById('registerUsername').value;
            const email = document.getElementById('registerEmail').value;
            const password = document.getElementById('registerPassword').value;
            
            if (!username || !email || !password) {
                showMessage('registerMessage', '请填写所有字段', true);
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE}/register`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ username, email, password })
                });
                
                const data = await response.json();
                
                if (data.code === 200) {
                    showMessage('registerMessage', '注册成功！请登录');
                    // 清空表单
                    document.getElementById('registerUsername').value = '';
                    document.getElementById('registerEmail').value = '';
                    document.getElementById('registerPassword').value = '';
                    // 切换到登录页面
                    setTimeout(() => showTab('login'), 2000);
                } else {
                    showMessage('registerMessage', data.message || '注册失败', true);
                }
            } catch (error) {
                showMessage('registerMessage', '网络错误，请稍后重试', true);
            }
        }
        
        async function login() {
            const username = document.getElementById('loginUsername').value;
            const password = document.getElementById('loginPassword').value;
            
            if (!username || !password) {
                showMessage('loginMessage', '请填写用户名和密码', true);
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE}/login`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ username, password })
                });
                
                const data = await response.json();
                
                if (data.code === 200) {
                    currentToken = data.data.token;
                    localStorage.setItem('token', currentToken);
                    showMessage('loginMessage', '登录成功！');
                    // 清空表单
                    document.getElementById('loginUsername').value = '';
                    document.getElementById('loginPassword').value = '';
                    // 获取用户信息
                    setTimeout(() => getUserProfile(), 1000);
                } else {
                    showMessage('loginMessage', data.message || '登录失败', true);
                }
            } catch (error) {
                showMessage('loginMessage', '网络错误，请稍后重试', true);
            }
        }
        
        async function getUserProfile() {
            if (!currentToken) {
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE}/profile`, {
                    method: 'GET',
                    headers: {
                        'Authorization': `Bearer ${currentToken}`
                    }
                });
                
                const data = await response.json();
                
                if (data.code === 200) {
                    const user = data.data;
                    const createTime = new Date(user.createTime).toLocaleString('zh-CN');
                    
                    document.getElementById('userDetails').innerHTML = `
                        <div class="user-info">
                            <h3>欢迎，${user.username}！</h3>
                            <p><strong>用户名：</strong>${user.username}</p>
                            <p><strong>邮箱：</strong>${user.email || '未设置'}</p>
                            <p><strong>注册时间：</strong>${createTime}</p>
                        </div>
                    `;
                    
                    // 隐藏登录注册表单，显示用户信息
                    document.getElementById('loginForm').classList.add('hidden');
                    document.getElementById('registerForm').classList.add('hidden');
                    document.getElementById('userInfo').classList.remove('hidden');
                    
                    // 隐藏tab
                    document.querySelector('.tab-container').style.display = 'none';
                } else {
                    logout();
                }
            } catch (error) {
                console.error('获取用户信息失败:', error);
                logout();
            }
        }
        
        function logout() {
            currentToken = null;
            localStorage.removeItem('token');
            
            // 显示tab
            document.querySelector('.tab-container').style.display = 'flex';
            
            // 显示登录表单
            showTab('login');
            
            // 清空用户信息
            document.getElementById('userDetails').innerHTML = '';
        }
    </script>
</body>
</html>